<template>
	<!-- 检测信息 -->
	<div id="quiz" class="quiz">
		<div class="acacirleCont">
			<div class="acacirleCont_cont">
				<div class="acacirleCont_cont_cent">
					<image src="~@/static/sc/bg02.png"  />
					<div class="acacirleCont_cont_cent_line"></div>
					<div class="acacirleCont_cont_cent_ttr">
						<p class="acacirleCont_cont_cent_ttr_left">会员权益</p>
						<div class="acacirleCont_cont_cent_ttr_right">
							<p>1、免费论文查重10次</p>
							<p>2、投稿文章快速审核</p>
							<p>3、学术热点精准推送</p>
							<p>4、参加会议专享优惠</p>
						</div>
					</div>
				</div>
			</div>
			<div class="acacirleCont_pay">
				<div class="acacirleCont_pay_cont">
					<div class="acacirleCont_pay_line"></div>
					<span>选择支付方式</span>
				</div>
				<ul>
					<li id="url" @click='getWxPay'>
						<image src="~@/static/Vip/wxzf.png"  />
						微信支付
						<!-- <el-radio v-model="radio" label="1" @change="getWxPay()">微信支付</el-radio> -->
					</li>
					<li @click='getzfbPay'>
						<image src="~@/static/Vip/zfb.png"  />
						支付宝支付
						<!-- 	<u-button type="success" @click='getzfbPay' >支付宝支付</u-button> -->
						<!-- <el-radio v-model="radio" label="2" @change="getzfbPay()">支付宝支付</el-radio> -->
					</li>
				</ul>
			</div>
			<!-- <div class="acacirleCont_pay_sub">
        <div class="pay_dub_con">
          立即开通
        </div>
      </div>-->
		</div>

	</div>
</template>

<script>
	// import router from "@/router/index";
	import util from "@/util/pay";
	//juqery
	export default {
		name: "quiz",
		data() {
			return {
				radio: "",
				movipwxdata: [],
				movipzfbdata: []
			};
		},
		methods: {
			// 支付
			// 学米兑换微信支付
			getWxPay() {
				this.movipwxdata = util.getWxpaydetail(2, 2, 298, "string");
				this.movipwxdata.then(data => {
					// pc端
					if (data.data.data.Code == 200) {
						$(".paymethod_code").css("display", "block");
						$("#wxpay").html("");
						var qrcode = new QRCode(document.getElementById("wxpay"), {
							width: 100,
							height: 100
						});
						qrcode.makeCode(data.data.data.data.qrCodeUrl);
						this.wxOrderNumber = data.data.data.data.OutTradeNo;
						var _this = this;
						this.timer = setInterval(() => {
							_this.WxPayOK();
						}, 3000);
					}
					// 移动端
					else if (data.data.code == 200) {
						// $("#url").click(function() {
						// 	location.href = data.data.data.qrCodeUrl;
						// });
						// $("#url").click();
						location.href = data.data.data.qrCodeUrl;
					} else {
						alert("生成订单失败");
					}
				});
			},
			// 学米兑换支付宝支付
			getzfbPay() {
				this.movipzfbdata = util.zfbpaydetail(2, 2, 298, "string");
				this.movipzfbdata.then(res => {
					if (res.data.data.Code == 200) {
						let divForm = document.getElementsByTagName("divform");
						if (divForm.length) {
							document.body.removeChild(divForm[0]);
						}
						const div = document.createElement("divform");

						div.innerHTML = res.data.data.data.responseBody;
						document.body.appendChild(div);
						document.forms[0].acceptCharset = "UTF-8";
						document.forms[0].setAttribute("target", "_blank");
						document.forms[0].submit();
					} else if (res.data.code) {
						let divForm = document.getElementsByTagName("divform");
						if (divForm.length) {
							document.body.removeChild(divForm[0]);
						}
						const div = document.createElement("divform");

						div.innerHTML = res.data.data.responseBody;
						document.body.appendChild(div);
						document.forms[0].acceptCharset = "UTF-8";
						document.forms[0].setAttribute("target", "_blank");
						document.forms[0].submit();
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	@media screen and (min-width: 1010px) {
		#quiz {
			display: none;
		}
	}

	@media screen and (max-width: 1010px) {
		#quiz {
			width: 100%;

			.acacirleCont {
				background: #f0f0f0;

				.acacirleCont_title {
					width: 100%;
					height: 50px;
					background: #fff;
					text-align: center;
					line-height: 50px;
					color: #000;
					font-size: 18px;
				}

				.acacirleCont_cont {
					width: 100%;
					height: 200px;
					background: #fff;
					margin-top: 10px;

					.acacirleCont_cont_cent {
						width: 94%;
						height: 80%;
						margin: 0 auto;
						position: relative;
						top: 10%;

						image {
							display: inline-block;
							width: 100%;
							height: 100%;
						}

						.acacirleCont_cont_cent_line {
							width: 80%;
							margin: 0 auto;
							border-top: 1px solid #eeeeee;
							position: absolute;
							top: 54px;
							left: 10%;
						}

						.acacirleCont_cont_cent_ttr {
							width: 71%;
							height: 49%;
							position: absolute;
							top: 39%;
							left: 11%;

							.acacirleCont_cont_cent_ttr_left {
								color: #000;
								font-weight: bold;
								font-size: 18px;
								float: left;
								line-height: 76px;
							}

							.acacirleCont_cont_cent_ttr_right {
								float: right;

								p {
									color: #3e3e3e;
									font-size: 14px;
									line-height: 21px;
								}
							}
						}
					}
				}

				.acacirleCont_pay {
					width: 100%;
					height: auto;
					background: #fff;
					margin-top: 15px;
					padding: 10px 15px 0 15px;

					.acacirleCont_pay_cont {
						width: 100%;

						.acacirleCont_pay_line {
							display: inline-block;
							height: 15px;
							border-left: 1px solid #003c80;
						}

						span {
							color: #000;
							font-weight: bold;
							font-size: 15px;
							margin-left: 10px;
						}
					}

					ul {
						width: 100%;
						margin-top: 12px;

						li {
							list-style: none;
							padding: 5px 0px 10px 5px;
							border-bottom: 1px solid #f0f0f0;

							image {
								display: inline-block;
								width: 30px;
								height: 30px;
							}

							.el-radio {
								width: 77%;
								color: #3d3d3d;
								font-size: 15px;
								margin-left: 15px;
								position: relative;
								top: -9px;

								/deep/.el-radio__input {
									position: absolute;
									right: 0;
								}

								/deep/.el-radio__label {
									color: #3d3d3d;
									font-size: 15px;
								}
							}
						}
					}
				}

				.acacirleCont_pay_sub {
					background: #fff;
					width: 100%;
					margin-top: 15px;

					.pay_dub_con {
						width: 50%;
						height: 40px;
						background: linear-gradient(90deg,
								rgba(3, 104, 184, 1),
								rgba(63, 156, 230, 1));
						box-shadow: 0px 2px 15px 0px rgba(199, 199, 199, 0.75);
						border-radius: 30px;
						margin: 0 auto;
						text-align: center;
						line-height: 40px;
						color: #fff;
						font-size: 15px;
						cursor: pointer;
						position: relative;
						top: 25px;
					}
				}
			}
		}
	}
</style>
